<template>
	<view class ="cardstyle" :style="{'background-color':bgColor}">
		<view class="titlebox">
			<view class="imgbox">
				<image :src="showImage" v-if="mode == 2" @error="handleImageException()"></image>
			</view>
			<view>
				<text v-if = "mode == 3" style="color: #aaa;">{{title}}</text>
				<text v-else>{{title}}</text>
			</view>
		</view>
		<view class="adbox" v-if = "mode == 3" style="margin-top: 5rpx;">
			<view v-for="(item,index) in imges">
				<image :src="item" mode="aspectFill" @error="handleImageError(index)"></image>
			</view>
		</view>
		
		<view class="tipbox">
			<view style="display: flex; margin: 5rpx; "  >
				<text class="texttips" v-if="isTop" style="color: red; margin-left: 0px;">
					置顶
				</text>
				<text style="color: #00f;" v-if="mode==3">广告</text>
				<text class="texttips">{{author}}</text>
				<text v-if="mode != 3">{{comments}}评</text>
			</view>
			
				<view style="flex:1; display: flex; justify-content: flex-end;color: #aaa;">
			        <text>{{ timedata }}</text>
			    </view>
		</view>
		<slot name="tips"></slot>
	</view>
</template>

<script>
	export default {
		name:"xinwen",
		data() {
			return {
				
			};
		},
		props:{
			bgColor:{
				type:String,
				default:'#f0f8ff'  //aff 粉色
			},
			title:{
				type:String,
				default:"新闻标题",
				require:true
			},
			author:{
				type:String,
				default:"来源",
				require:true
			},
			comments:{
				type:String,
				default:0,
				require:true
			},
			timedata:{
				type:String,
				default:"2000.0.0",
				require:true
			},
			isTop:{
				type:Boolean,
				default:false,
				require:true
			},
			images:{
				type:Array,
				default:() => []
			},
			showSearch:{
				type:Boolean,
				default:false
			}	
		}
	}
</script>

<style>
	.texttips{
		font-size: 15px;
		color: #aaa;
		margin-right: 10rpx;
	}
	.cardstyle{
		font-size: 35rpx;
		margin: 10rpx;
		padding: 15rpx;
		border-radius: 10px;
	}
	.tipbox{
		display: flex;
		font-size: 30rpx;
	}
</style>